<script setup lang="ts">
import {reactive, ref} from "vue";
import {getHouseWorkList, houseWorkType} from "../../api/servers.ts";

const houseWorkData = ref<houseWorkType[]>(
    [] as houseWorkType[]
)

const getList = async () => {
  await getHouseWorkList().then(res => houseWorkData.value = res.data)
}

getList();

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const value = ref('')

const options = [
  {
    value: '1',
    label: '已结算',
  },
  {
    value: '0',
    label: '未结算',
  },
]
</script>

<template>
  <el-card class="box-card">
    <div class="query">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按照公司名称进行查询">
          <el-input v-model="formInline.user" placeholder="输入公司名称" clearable/>
        </el-form-item>
        <el-form-item label="按照用户名称进行查询">
          <el-input v-model="formInline.user" placeholder="输入用户名称" clearable/>
        </el-form-item>
        <el-form-item label="按照是否结算进行查询">
          <el-select v-model="value" placeholder="Select">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="houseWorkData" style="width: 100%">
      <el-table-column prop="id" label="id" width="180"/>
      <el-table-column prop="company.name" label="公司名称" width="180"/>
      <el-table-column prop="user.name" label="用户昵称" width="180"/>
      <el-table-column prop="server.name" label="服务类型"/>
      <el-table-column prop="serverTime" label="服务时间"/>
      <el-table-column prop="address" label="下单地址"/>
      <el-table-column prop="isCount" label="是否结算"/>
      <el-table-column prop="" label="表格操作">
        <el-button type="danger">删除</el-button>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="100"/>
  </el-card>
</template>

<style scoped>

.box-card {
  width: auto;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

.query {
  margin-top: 20px;
}
</style>